<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            margin: auto;
            color: black;
            font-weight: 900;
            font-size: 80px;
            background-color: hotpink;
            text-align: center;
            line-height: 500px;
        }
        input{
            margin:50px 30px;
        }
    </style>
</head>

<body>
    <input type="button" value="下一个">
    <div>
      
    </div>
</body>
<script>
    var arr = ['眉飞色舞,连蹦带跳,左顾右盼,Rem,嬉皮笑脸,愁眉苦脸,东倒西歪,蹑手蹑脚,喜出望外,垂头丧气,暴跳如雷,狼吞虎咽,摇头晃脑,昂首挺胸,捧腹大笑',
    '幸灾乐祸,张牙舞爪,贼眉鼠眼,Pink老师,牛头马面,兔死狐悲,龙腾虎跃,狗急跳墙, 盘丝洞,降龙十八掌,水上轻功,冬瓜排骨汤,奥运会,猪八戒背媳妇,吉利服',
    "见钱眼开,三级头,妙蛙种子,无间道,王者荣耀,闭包,丘比特,抓耳挠腮,金鸡独立,葫芦娃,奥特曼海绵宝宝,穿越火线,买了佛冷,虎头蛇尾,鸡毛信",
    "世界末日,斗地主,沸羊羊,乔治,大手大脚,长臂猿,传智播客,芙蓉姐姐,西红柿首富,鼠标滚轮,split(','),男厕所,铁道游击队,地道战",
    "囧,this指向window,抢红包,七上八下,哑口无言,见钱眼开,左右开弓,过河拆桥,三长两短,赤手空拳,一分为二,易如反掌,缚手缚脚,唾手可得,手舞足蹈",
    "Sessionstroage,金鸡独立,挤眉弄眼,左顾右盼,欣喜若狂,愁眉苦脸,搭弓射箭,瞻前顾后,视而不见,捶胸顿足,一刀两断,创建对象,穿针引线,掩耳盗铃,一瘸一拐",
    "摇头晃脑,Json数据,抓耳挠腮,风吹雨打,无精打采,心花怒放,十全十美,眉飞色舞,三长两短,心有灵犀,一贫如洗,成鱼落雁,低声下气,五音不全,八仙过海",
    "黑马程序员,坐立不安,火眼金睛,才貌双全,回头是岸,四大皆空,水深火热,驷马难追,绕梁三日,事件委托,色即是空,愚公移山,大器晚成,美国队长,楚河汉界",
    "人工智能,黑色星期五,感恩节,圣诞节,机械键盘,双十一,抛媚眼,长颈鹿,龙兄虎弟,响应式布局,变形金刚,功夫熊猫,哈利波特,指环王,绿巨人",
    "春野樱,王蔚老师,立定跳远,植物大战僵尸,学猫叫,金鸡独立,如来神掌,一手遮天,原型链,放下屠刀立地成佛,面壁思过,猴子捞月,海底捞,冒泡排序,心直口快"
]

        var j = 8;
    var i = 0;
        var newarr = arr[j].split(',');
        document.getElementsByTagName('div')[0].innerText = newarr[0]

        console.log(newarr)
    document.getElementsByTagName('input')[0].onclick=function(){
        i++;
        if(i>15){
            // alert("没有了")
            i=0;
            return
        }
        document.getElementsByTagName('div')[0].innerText = newarr[i]

    }
</script>

</html>